<template>
  <div id="app">
    <button @click="handleAge">点击添加年龄</button>
    <button @click="handlePreProperty">点击在先添加数据数组中添加属性</button>
    <button @click="handleNextProperty">点击在后添加数据数组中添加属性</button>
    <div>{{ user.age }}</div>
    <div v-for="(man, index) in people" id="index">
      {{ man.name }}{{ man.age }}{{ man.salary }}{{ man.sex }}
    </div>
    <div v-for="(item, index) in people.slice(0, 2)" :key="index">
      我是剪切过后的people数组
    </div>

    <!-- 测试类名是否可叠加 -->
    <div class="one" :class="user ? 'two' : ''">测试类名</div>
  </div>
</template>

<script>
export default {
  name: 'App',
  components: {},
  data() {
    return {
      user: {
        // name: '关天天'
      },
      people: [
        { name: '关天天', age: 29, salary: '40w' },
        { name: '洪小超', age: 27, salary: '45w' },
        { name: '张佩奇', age: 19, salary: '50w' }
      ],
      human: []
    }
  },
  mounted() {
    console.log(this),
      (this.human = [
        { name: '关天天', age: 29, salary: '40w' },
        { name: '洪小超', age: 27, salary: '45w' },
        { name: '张佩奇', age: 19, salary: '50w' }
      ])
  },
  methods: {
    handleAge() {
      this.user.age = 29
      console.log(this)
    },
    // 在先添加数据数组中添加属性
    handlePreProperty() {
      this.people.forEach(item => {
        item.sex = 'male'
      })
    },
    // 在后添加数据数组中添加属性
    handleNextProperty() {
      this.human.forEach(item => {
        item.sex = 'male'
      })
    }
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}

/* 测试类名 */
.one {
  height: 100px;
  width: 100px;
  background: red;
}
.two {
  height: 400px;
  width: 400px;
  color: blue;
}
.three {
  border-radius: 50%;
}
</style>
